
<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图书管理系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="/js/vue/vue.min.js" ></script>
    <style>
        [v-cloak] {
			display: none !important;
		}
        .select{
			padding: 5px;
			border-radius: 5px;
			outline: none;
            border: 1px solid #eee;
            background-color: #fff;
		}
        .demo-input{
            padding-left: 10px; 
            height: 38px;
             min-width: 200px; 
             line-height: 38px; 
             border: 1px solid #e6e6e6;
            background-color: #fff;  
            border-radius: 2px;
            }
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
    <div class="wrapper" id='app'>

        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p v-cloak>{{user.manager.name}}</p><br />
                    </div>
                </div>
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    <li class="header">菜单</li>
                    <!-- 菜单 -->
                    <li class="treeview">
                        <a href="/pages/manager/bookDatalist.html">
                            <i class="fa fa-folder"></i> <span>图书管理</span>
                        </a>
                    </li>
                    <li class="treeview">
                        <a href="/pages/manager/bookTypes.html">
                            <i class="fa fa-folder"></i> <span>图书分类管理</span>
                        </a>
                    </li>

                    <li class="treeview">
                        <a href="/pages/manager/borrowBooks.html">
                            <i class="fa fa-folder"></i> <span>借阅信息</span>
                        </a>
                    </li>
                    <li class="treeview">
                        <a href="/pages/manager/reserveBorrowBooks.html">
                            <i class="fa fa-folder"></i> <span>预定信息</span>
                        </a>
                    </li>



                    <li class="treeview">
                        <a href="/pages/manager/reserveGiveBack.html">
                            <i class="fa fa-folder"></i> <span>归还信息</span>
                        </a>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-folder"></i> <span>统计管理</span>
                            <span class="pull-right-container">
		                        <i class="fa fa-angle-left pull-right"></i>
		                    </span>
                        </a>
                        <ul class="treeview-menu">
                            <li id="/pages/manager/GBStatistics.html">
                                <a href="GBStatistics.html">
                                    <i class="fa fa-circle-o"></i> 借书/归还
                                </a>
                            </li>
                            <li id="/pages/manager/businessStatistics.html">
                                <a href="businessStatistics.html">
                                    <i class="fa fa-circle-o"></i> 营业额
                                </a>
                            </li>
                            <li id="/pages/manager/salesStatistics.html">
                                <a href="salesStatistics.html">
                                    <i class="fa fa-circle-o"></i> 销量
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- 导航侧栏 -->
        <!-- 页面头部 -->
        <header class="main-header">
            <!-- Logo -->
            <a href="#" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>管理</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>图书管理系统</b></span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="/img/user2-160x160.jpg" class="user-image" alt="User Image">
                                <span class="hidden-xs" v-cloak> {{user.manager.name}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                                    <p v-cloak>
                                        {{user.manager.name}} - 数据管理员
                                    </p>
                                </li>
                                <li class="user-footer">
                                    <div class="pull-right">
                                        <a href="/exit/manager" class="btn btn-default btn-flat ">退出</a>
                                    </div>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>
        </header>

      <!-- 内容区域 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" id="app">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                    统计
                    <small>statistics</small>
                </h1>
                <ol class="breadcrumb">
                    <li class="active"><a href="#">统计</a></li>
                </ol>
            </section>

            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        <!-- 借书AND归还 -->
                        <div class="box box-primary">
                            <div class="date box-header with-border">
                                <div class="col-md-9">
                                    <h3 class="box-title">借书/归还 统计</h3>
                                    <input type="text"  class="demo-input" placeholder="年范围" id="test1">
                                    <input type="text" readonly class="demo-input"placeholder="年月范围" id="test2">
                                    <input type="text" class="demo-input" placeholder="日期范围" id="test3">
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="chart" id="line"  style="height:300px">
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <!-- page script -->
        <!-- 内容区域 /-->

    </div>

    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugins/adminLTE/js/app.min.js"></script>
    <script src="/plugins/chartjs/Chart.min.js"></script>
    <script src="/plugins/bootstrap-slider/bootstrap-slider.js"></script>
    <script type="text/javascript" src="/js/axios-0.18.0.js"></script>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/laydate.js"></script>
    <script>
        lay('#version').html('-v'+ laydate.v);
        let bashPath = 'http://www.zhoupanfeng.club:7300/mock/5ef4c3f22ab3d053f8d3fb77/bm/';
        let vue = new Vue({
            el:"#app",
            data:{
                GBObj:[],   //
                nowDateStr:new Date(),  //当前日期
                beforeBB:[],
                beforeGB:[],
                beforeD:[],
                BGStr:"柱状图", //借书and归还当前的图形
                myChartLine:null,
                optionLine:{
                    toolbox: {
                        show: true,
                        feature: {
                            
                            magicType: {type: ['line', 'bar']},
                            myTool1: {
                                show: true,
                                title: '借书人数降序',
                                icon: 'image:///img/sort.png',
                                onclick:()=>{
                                    //降序
                                    vueT.GBObj.sort(function(a,b){
                                        return b.borrowNumber - a.borrowNumber;
                                    });
                                    console.log(vueT.optionLine.series[0].type);
                                    vueT.sortSub();
                                },
                            },
                            myTool2: {
                                show: true,
                                title: '还书人数降序',
                                icon: 'image:///img/sort.png',
                                onclick:()=>{
                                    //降序
                                    vueT.GBObj.sort(function(a,b){
                                        return b.giveBackNumber - a.giveBackNumber;
                                    });
                                    vueT.sortSub();
                                },
                            },
                            myTool3: {
                                show: true,
                                title: '还原排序',
                                icon: 'image:///img/restor.png',
                                onclick:()=>{
                                    //复制
                                    let option = vueT.optionLine;
                                    option.series[0].data = vueT.beforeBB;
                                    option.series[1].data = vueT.beforeGB;
                                    option.xAxis[0].data = vueT.beforeD;
                                    vueT.myChartLine.setOption(option);
                                },
                            },
                            dataView: {readOnly: false},
                            myTool4: {
                                show: true,
                                title: '导出Excel',
                                icon: 'image:///img/Excel.png',
                                onclick:()=>{
                                    vueT.outExcel();
                                },
                            },
                            saveAsImage: {},
                        }
                    },
                    title: {
                        text: null
                    },
                    legend: {
                        data:['借书次数','归还次数']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: null,
                            axisTick: {
                                alignWithLabel: true
                            }
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                        }
                    ],
                    series: [
                        {
                            name: '借书次数',
                            type: 'bar',
                            data:null,
                            markPoint: {
                                data: [{
                                    name:"最大值",
                                    type: "max",
                                },
                                {
                                    type: "average",
                                },
                                {
                                    type: "min",
                                },],
                                symbolSize: 4
                            }
                        },
                        {
                            name: '归还次数',
                            type: 'bar',
                            data: null,
                            markPoint: {
                                data: [{
                                    name:"最大值",
                                    type: "max",
                                },
                                {
                                    type: "average",
                                },
                                {
                                    type: "min",
                                },],
                                symbolSize: 2
                            }
                        },
                    ]
                },
             user:null
            },
            methods: {
                //初始化当前日期
                initNowDateStr(){
                    let nowDate = new Date();
                    let y =  nowDate.getFullYear()+"年";
                    let m = (nowDate.getMonth()+1)+"月";
                    let d = nowDate.getDate()+"日";
                    let start = y + m + "1日";
                    let end = y + m + d;
                    this.nowDateStr = start + " - " + end;
                },
                //初始化选择时间的input
                initDateInput(){
                    //点击确定选择时间，修改表的标题，发送请求
                    let _this = this;
                    $('.demo-input').click(function(){
                        $('.laydate-btns-confirm').click(function(){
                            let parent = this.parentNode.parentNode.parentNode;
                            // layui-laydate 1年范围, 2年月范围, 3日期范围
                            let id = parent.id;
                            id = id[id.length-1];
                            let title = $('#test'+id).val();
                            if(title==undefined || title=='' ||title.length<=0){
                                return ;
                            }
                            //修改表的标题
                            _this.optionLine.title.text = title;
                            Object.assign({},_this.optionLine);
                            //发送请求
                            _this.getLineData(id,_this.optionLine.title.text);
                            //清除其他input的数据
                            for(let i=1;i<=3;i++){
                                if(i+''!=id){
                                    $('#test'+i).val('')
                                }
                            }
                        })
                    })
                },
                //初始化折线图
                initLine(){
                     //初始化标题名
                    this.optionLine.title.text = this.nowDateStr;
                    // 基于准备好的dom，初始化echarts实例
                    this.myChartLine = echarts.init(document.getElementById('line'));
                    this.myChartLine.setOption(this.optionLine);
                    this.myChartLine.showLoading();
                    // 指定图表的配置项和数据  发送请求获取当前月份数据
                    this.getLineData(3,this.nowDateStr);
                },
                //从服务器获取折线图数据
                getLineData: function (id, dateStr) {
                    console.log(dateStr);
                    let index = dateStr.indexOf(" - ");
                    let start = dateStr.substring(0,index).replace("年","-").replace("月","-").replace("日","-");
                    let end = dateStr.substring(index+3).replace("年","-").replace("月","-").replace("日","-");
                    start = start.substring(0,start.length-1);
                    end = end.substring(0,end.length-1);
                    console.log(index,start,end);
                     axios.post("/admin/GBStatistics/"+id+"/"+start+"/"+end).then( response => {
                        console.log(response);
                        let lineData = response.data;
                        let option = this.optionLine;
                        option.xAxis[0].data = this.beforeD = lineData.days; //日期 （*号）
                        option.series[0].data = this.beforeBB = lineData.borrowNumbers;  //借书人数
                        option.series[1].data = this.beforeGB = lineData.giveBackNumbers; //还书人数
                        // 使用刚指定的配置项和数据显示图表。
                        this.optionLine = option;
                        this.myChartLine.setOption(option);
                        //组合称对象
                        let GBObj = this.GBObj;
                        for (let i = 0; i < lineData.days.length; i++) {
                            GBObj.push({
                                "borrowNumber": lineData.borrowNumbers[i],
                                "giveBackNumber": lineData.giveBackNumbers[i],
                                "day": lineData.days[i]
                            });
                        }
                        this.myChartLine.hideLoading();
                    }).catch(err => {
                        console.log(err);
                        alert(err.response.data.message);
                        this.myChartLine.hideLoading();
                    });
                },
                //初始化营业额统计图
                //导出 Excel
                outExcel(){
                    axios.get(bashPath).then(response => {
                            alert('导出成功');
                    }).catch(err => {
                            alert('导出失败');
                    });
                },
                //排序用到的方法
                sortSub(){
                    //拆分数据
                    let date1 = [];
                    let date2 = [];
                    let days = [];
                    let GBObj = vueT.GBObj;
                    for(let i=0;i<GBObj.length;i++){
                        let obj = GBObj[i];
                        date1.push(obj.borrowNumber);
                        date2.push(obj.giveBackNumber);
                        days.push(obj.day);
                    }
                    //赋值
                    let option = vueT.optionLine;
                    option.series[0].data = date1;
                    option.series[1].data = date2;
                    option.xAxis[0].data = days;
                    vueT.myChartLine.setOption(option);
                }
            },
            created () {
                //初始化当前日期
                this.initNowDateStr();
                //初始化折线图
                this.initLine();
                //初始化选择时间的input
               this.initDateInput();
                this.user=JSON.parse(sessionStorage.getItem("user"))
            },

        })

        let vueT = vue;
        //年范围
        laydate.render({
        elem: '#test1'
        ,type: 'year'
        ,range: true
        });
        //年月范围
        laydate.render({
        elem: '#test2'
        ,type: 'month'
        ,range: true
        });
         //日期范围
        laydate.render({
        elem: '#test3'
        ,range: true
        });
            

 		
    </script>
</body>

</html>
<!---->